<template>
  <!-- <div class="p-4">
    <div class="flex bg-white">
      <div class="w-1/3">
        <div>表单</div>
      </div>
      <div class="w-1/3">
        <div>代码编辑</div>
      </div>
      <div class="w-1/3">
        <div>一些图标</div>
      </div>
      :labelCol="labelCol" :wrapperCol="wrapperCol"
    </div>
  </div> -->
  <div class="p-2">
    <a-divider orientation="left">vue相关</a-divider>
    <a-row>
      <a-col :span="6">
        <a-card title="vue生命周期函数">
          <div class="infoArea">
            <a-alert message="该操作不会影响页面标题，仅修改Tab标题" />
            <ul>
              <li v-for="(item, index) in apiList" :key="index">
                -
                <span class="colorSpan">{{ item.word }}</span>：{{ item.note }}
                <span v-if='item.comment'> -{{ item.comment }}</span>
              </li>
            </ul>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="false" title="vue一些知识点">
          <div class="infoArea">
            <ul>
              <li>
                -<span class="colorSpan">v-show</span>：结构还在，隐藏<br>
                -<span class="colorSpan">v-if</span>：结构不在
              </li>
              <li>
                -<span class="colorSpan">hooks</span>：功能（变量函数）封装，相当于vue2的mixin，useXxx
              </li>
            </ul>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-divider orientation="left">其他测试</a-divider>
    <a-row>
      <a-col :span="6">
        <a-card :loading="loading" :bordered="true" title="表单">
          <div class="infoArea">
            <a-form :model="formData" name="basic" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
              <a-form-item label="地址名称：" name="urlName" :rules="[{ required: true, message: '请输入用户名!' }]">
                <a-input v-model:value="formData.urlName" />
              </a-form-item>
              <a-form-item label="地址权重：">
                <a-input-number v-model:value="formData.urlWeight" :min="0" addon-after="%" />
              </a-form-item>
              <a-form-item label="下拉框：">
                <a-select v-model:value="formData.select" @change="formSelectChange">
                  <a-select-option value="shanghai">上海</a-select-option>
                  <a-select-option value="beijing">北京</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :wrapper-col="{ span: 24, offset: 11 }">
                <a-button type="primary" html-type="submit">查看信息</a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="true" title="一些图标">
          <div class="infoArea">
            <a-avatar class="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png" />
            <a-avatar class="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png" />
            <a-avatar class="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png" />
            <a-avatar class="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png" />
            <a-avatar class="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg" />
            <a-avatar class="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
            <a-avatar class="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            <a-avatar style="color: #f56a00; background-color: #fde3cf">张三</a-avatar>
            <a-divider orientation="left"></a-divider>
            <a-avatar class="avatar priority-L" title="一般消息">
              <template #icon>
                <Icon icon="bi:exclamation-lg" />
              </template>
            </a-avatar>
            <a-avatar class="avatar priority-M" title="中级消息">
              <template #icon>
                <Icon icon="entypo:info" />
              </template>
            </a-avatar>
            <a-avatar class="avatar priority-H" title="高级消息">
              <template #icon>
                <Icon icon="ant-design:warning-filled" />
              </template>
            </a-avatar>
            <a-avatar style="background-color: #87d068">
              <template #icon>
                <UserOutlined />
              </template>
            </a-avatar>
            
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :bordered="false" title="pre代码块演示">
          <div class="infoArea">
            <b>键盘操作快捷键：</b>
            <div style="border: 1px solid #cccccc; padding: 8px; width: 740px">
              <pre>
          F2 | 如果存在，激活单元格为编辑状态
          Esc | 如果存在，取消单元格编辑状态
          ↑ | 如果存在，则移动到上面的单元格
          ↓ | 如果存在，则移动到下面的单元格
          ← | 如果存在，则移动到左边的单元格
          → | 如果存在，则移动到右边的单元格
          Tab | 如果存在，则移动到右边单元格；
        </pre>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-card :bordered="true" title="按钮组">
          <div class="infoArea" style="white-space: normal;display: block;">
            <a-button type="primary"> 测试按钮 </a-button>
            <a-button type="primary" v-if="startEdit" :loading="loading"> 加载中 </a-button>
            <a-button type="default" v-if="startEdit"> 默认 </a-button>
            <a-button type="default" v-if="startEdit" danger> 危险 </a-button>
            <a-button color="success" v-if="startEdit"> 成功 </a-button>
            <a-button color="warning" v-if="startEdit"> 警告 </a-button>
            <a-button color="error" v-if="startEdit"> 错误 </a-button>
            <a-button color="error" v-if="startEdit" class="ml-6" disabled> 禁用 </a-button>
            <a-button type="link" v-if="startEdit"> link </a-button>
            <a-button type="link" v-if="startEdit" disabled> 这个按钮可以作为提示信息等 </a-button>
            <a-button preIcon="ant-design:filter" type="primary" @click="">高级查询</a-button>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="true" title="代码编辑器">
          <div class="infoArea">
            <JCodeEditor v-model:value="codeDetail" mode="js" height="80px" />
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :bordered="true" title="vue生命周期函数">
          <div class="infoArea">
            <ul>
              <li v-for="(item, index) in apiList" :key="index">
                <span>-</span>
                <span class="colorSpan">{{ item.word }}</span>：
                {{ item.note }}
              </li>
            </ul>
          </div>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, unref, h } from 'vue';
import './common/common.less';
import { JCodeEditor } from '/@/components/Form';
import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构
import { UserOutlined } from '@ant-design/icons-vue';

const codeDetail = ref('代码编辑器哈哈哈哈哈             ');
const loading = ref(true);
const startEdit = ref<boolean>(true);
const formData = ref({
  urlName: 'str1',
  urlWeight: '12',
  select: '',
});
//生命周期函数
const apiList = ref([
  { word: "onBeforeMount", note: "挂载前", comment: '父子关系中，先挂载子组件' },
  { word: "onMounted", note: "挂载完毕" },
  { word: "onBeforeUpdate", note: "更新前" },
  { word: "onUpdated", note: "更新完毕" },
  { word: "onBeforeUnmount", note: "卸载前" },
  { word: "onUnmounted", note: "卸载完毕" },

]);

// 默认执行一次
onMounted(async () => {
  setTimeout(() => {
    loading.value = false;
  }, 200);
});

/**
 * 确定事件
 * @param param 
 */
const onFinish = (param: any) => {
  $message.info('完成了....' + param);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
  $message.info('出现错误....');
};

// Emits声明
const emit = defineEmits(['register', 'success']);

/**
 * 表单下拉框切换
 */
function formSelectChange(e, option) {
  console.log('下拉框切换：', option);
  $message.info('下拉框切换了....' + e);
}

/**
 * 实体类点击事件
 */
function handleEntityClick(item) {
  $message.info('实体类跳转中....' + item);
}

</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}

.infoArea {
  // display: flex;
  // justify-content: space-between;
  // padding: 0 10%;
  // width: 100%;
  height: 200px;
}

.priority-L,
.priority-M,
.priority-H {
  font-size: 18px;
}

.priority-L {
  background-color: #7cd1ff;
}

.priority-M {
  background-color: #ffa743;
}

.priority-H {
  background-color: #f8766c;
}
</style>